<template>
  <div class="aside">
    <el-menu
        :default-openeds="[0]"
        :default-active="activeIndex"
        @select="handleSelect"
    >
      <el-menu-item index="0">
        <i class="el-icon-menu" title="全部"></i>
        <span slot="title">全部</span>
      </el-menu-item>
      <el-menu-item index="1" title="图片">
        <i class="el-icon-picture"></i>
        <span slot="title">图片</span>
      </el-menu-item>
      <el-menu-item index="2" title="文档">
        <i class="el-icon-document"></i>
        <span slot="title">文档</span>
      </el-menu-item>
      <el-menu-item index="3" title="视频">
        <i class="el-icon-video-camera-solid"></i>
        <span slot="title">视频</span>
      </el-menu-item>
      <el-menu-item index="4" title="音乐">
        <i class="el-icon-headset"></i>
        <span slot="title">音乐</span>
      </el-menu-item>
      <el-menu-item index="5" title="其他">
        <i class="el-icon-takeaway-box"></i>
        <span slot="title">其他</span>
      </el-menu-item>
    </el-menu>
    <Storage class="storage"></Storage>
  </div>

</template>

<script>
import Storage from "@/components/Storage";

export default {
  name: "Aside",
  components: {Storage},
  data() {
    return {}
  },
  computed: {
    //  当前活跃菜单项index，也是当前被选中的文件类型
    activeIndex: function () {
      return String(this.$route.query.fileType)
    }
  },
  methods: {
    //  导航菜单项点击事件
    handleSelect(index) {
      let pid = 0;
      if (index !== '0') {
        pid = null;
      }
      this.$router.push({
        path: '/file',
        query: {fileType: index, fileName: '/', pid: pid}
      })
    }
  }
}
</script>

<style scoped>
.aside {
  display: flex;
  flex-direction: column;
}

.el-menu {
  border-right: solid 0 #e6e6e6 !important;;
  flex: 1;
}

.storage {
  margin: 50px 0;
}

</style>
